<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div01
			{
				width: 300px;
				height: 300px;
				background-color: lightsalmon;
			}
		</style>
	</head>
	<body>
		<div id="div01">
		</div>
		
		<img id="img01" src="baidu.png" />
		
		<script type="text/javascript">
			
			// var div01 = document.getElementById("div01");
			div01.onclick = function(){div01.textContent = "鼠标单击了";}
			div01.ondblclick = function(){div01.textContent = "鼠标双击了";}
			div01.onmousedown = function(){div01.textContent = "鼠标按下了";}
			div01.onmouseup = function(){div01.textContent = "鼠标抬起";}
			div01.onmouseover = function(){div01.textContent = "鼠标移入";}
			div01.onmouseout= function(){div01.textContent = "鼠标移出";}
			div01.onmousemove= function(){div01.textContent = "鼠标移动"+event.clientX+","+event.clientY;}
			
			// 练习:
			// 添加一张图片
			// 给他添加鼠标事件 鼠标移入透明度降低 鼠标移出透明度恢复正常
			// img01.style.opacity = 0.5
			// img01.style.opacity = 1
			
			img01.onmouseover = function()
			{
				img01.style.opacity = 0.5;
			}
			
			img01.onmouseout = function()
			{
				img01.style.opacity = 1;
			}
			 
			// *练习：图片跟随鼠标移动
			// 事件添加到body上
			// 图片设置为绝对布局 position: absolute;
			// 当鼠标移动时  
			// img02.left = event.clientX; 
			// image02.top=event.clientY
		</script>
	</body>
</html>
